import React from 'react';
import { InputNumber } from 'antd';

import styles from './DelayInput.less';

class DelayInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
    this.isShowStateVlue = false;
  }

  onInputChange = value => {
    // const { name } = this.props;
    this.isShowStateVlue = true;
    this.setState({ inputValue: value });
    // console.log(value);
  }

  onBlur = (e) => {
    const { value } = e.target;
    const newValue = parseInt(value, 10);
    const { value: propsValue, onBlur, name } = this.props;
    this.isShowStateVlue = false;
    if (!value && newValue !== 0) {
      this.setState({ inputValue: propsValue });
      return;
    }
    if (onBlur) {
      const obj = {};
      obj[name] = newValue;
      onBlur(obj);
    }
  }

  render() {
    const { label, value, max = 100000, disabled=false } = this.props;
    const { inputValue } = this.state;
    const newValue = this.isShowStateVlue ? inputValue : value;
    return (
      <div className={styles.timeinput}>
        <InputNumber
          value={newValue}
          min={0}
          max={max}
          onChange={this.onInputChange}
          onBlur={this.onBlur}
          disabled={disabled}
        />
        <span className={styles.label}>{label}</span>
      </div>
    );
  }
}
export default DelayInput;